<script setup>
import { inject, ref } from "vue"
import { onLoad, onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app"

//#region 定义数据
// 根组件参数
const http = inject("$http")
const showMsg = inject("$showMsg")
// 请求参数对象
const queryObj = ref({
    // 查询关键词
    query: '',
    // 商品分类Id
    cid: '',
    // 页码值
    pagenum: 1,
    // 每页显示多少条数据
    pagesize: 10
})
//#endregion

//#region 商品列表
// 商品列表的数据
const goodsList = ref([])
// 总数量，用来实现分页
const total = ref(0)
// 是否正在请求数据
let isloading = false


// 获取商品列表数据的方法
const getGoodsList = async (cb) => {
    // ** 打开节流阀
    isloading = true
    // 发起请求
    const { data: res } = await http.get('/api/public/v1/goods/search', queryObj.value)
    // ** 关闭节流阀
    isloading = false
    // 只要数据请求完毕，就立即按需调用 cb 回调函数
    cb && cb()
    // 判断请求是否成功
    if (res.meta.status !== 200)
        return showMsg()
    // 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
    goodsList.value = [...goodsList.value, ...res.message.goods]
    total.value = res.message.total
}
//#endregion

// 数据加载
onLoad((options) => {
    // 将页面参数转存到 this.queryObj 对象中
    // console.log(options);
    queryObj.value.query = options.query || ''
    queryObj.value.cid = options.cid || ''
    // 调用获取商品列表数据的方法
    getGoodsList()
})

// 触底的事件
onReachBottom(() => {
    console.log("加载更多数据");
    // 判断是否还有下一页数据
    if (queryObj.value.pagenum * queryObj.value.pagesize >= total.value)
        return showMsg('数据加载完毕！')
    // 判断是否正在请求其它数据，如果是，则不发起额外的请求
    if (isloading) return
    // 让页码值自增 +1
    queryObj.value.pagenum += 1
    // 重新获取列表数据
    getGoodsList()

})

// 下拉刷新的事件
onPullDownRefresh(() => {
    console.log("重新加载数据");
    // 1. 重置关键数据
    queryObj.value.pagenum = 1
    total.value = 0
    isloading = false
    goodsList.value = []
    // 2. 重新发起请求
    getGoodsList(() => uni.stopPullDownRefresh())
})

// 点击跳转到商品详情页面
const gotoDetail = (goods) => {
    uni.navigateTo({
        url: '/subpkg/goods_detail/goods_detail?goods_id=' + goods.goods_id
    })
}
</script>

<template>
    <view>
        <view class="goods-list">
            <view v-for="(goods, i) in goodsList" :key="i" @click="gotoDetail(goods)">
                <!-- 为 my-goods 组件动态绑定 goods 属性的值 -->
                <my-goods :goods="goods"></my-goods>
            </view>
        </view>
    </view>
</template>

<style lang="scss"></style>
